@import "_mixins.less";

.condition-view-widget-normal() {
  & .condition-body {
    @line-offset: 100px;
    @creator-size: 26px;
    @color-line: #AAAAAA;
    @color-line-hover: #DDDDDD;

    position: relative;
    padding-left: 150px;
    &.has-relation {
      &:after {
        content: '';
        border-left: 1px @color-line solid;
        position: absolute;
        top: 16px;
        bottom: -8px;
        left: @line-offset;
      }
      &:before {
        content: '';
        border-top: 1px @color-line solid;
        position: absolute;
        top: 16px;
        left: @line-offset + 1px;
        width: 50px;
      }
      .filter-relation {
        .button();
        display: inline-block;
        padding: 5px 10px;
        border: 1px rgba(0, 0, 0, .2) solid;
        .hover(black, lighten(black, 50%));
        position: absolute;
        z-index: 10;
        left: 82px;
        top: 50%;
        margin-top: -18px;
        background-color: #fff;

        &.disabled {
          color: rgba(0, 0, 0, .4);
          .hover(rgba(0, 0, 0, .4), rgba(0, 0, 0, .4));
        }
      }
    }
    .condition {
      position: relative;
      margin-bottom: 7px;

      & > .Select {
        margin-right: 7px;
        display: inline-block;
        min-width: 120px;

        &.field {
          width: 180px;
        }
      }

      .Select-control {
        min-height: 34px;
      }

      .value-container {
        display: inline-block;
        width: 300px;
        vertical-align: top;

        .input-text {
          height: 34px;
        }
      }

      .iconfont.btn-iconfont {
        display: inline-block;
        .button();
        .hover(@color-line, @color-line-hover);
        color: @color-line;
        vertical-align: top;
        margin: 5px auto auto 10px;
        width: 30px;
      }
    }
    .creator {
      .button();
      display: inline-block;
      width: @creator-size;
      height: @creator-size;
      line-height: 1;
      background: transparent;
      color: @color-line;
      font-size: 24px;
      position: absolute;
      left: @line-offset - @creator-size / 2 + 1px;
      &:hover {
        color: @color-line-hover;
        border-color: @color-line-hover;
      }
    }
  }
} // condition-view-widget-float
